<!DOCTYPE html>
<html>
{% include 'www/header.html' %}
<style>
    .about-container {
        padding: 3rem 0;
        background: #f8f9fa;
        min-height: 100vh;
    }

    .about-card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.05);
        padding: 2rem;
        margin-bottom: 2rem;
    }

    .section-title {
        font-size: 1.5rem;
        color: #333;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #f0f2f5;
        text-align: left;  /* 添加左对齐 */
        display: flex;     /* 使用 flex 布局 */
        align-items: center; /* 垂直居中图标和文字 */
    }
    .section-title i {
        color: #009688;
        margin-right: 0.5rem;
        display: inline-block; /* 确保图标正确显示 */
    }

    .section-content {
        font-size: 1rem;
        line-height: 1.8;
        color: #666;
        text-align: left;
    }

    .section-content p {
        text-indent: 2em;
        margin-bottom: 1rem;
    }

    .contact-info {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 0;
    }

    .contact-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #666;
    }

    .contact-item i {
        color: #009688;
        font-size: 1.2rem;
    }

    @media (max-width: 768px) {
        .about-container {
            padding: 1.5rem 0;
        }

        .about-card {
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }
    }
</style>

<div class="about-container">
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md12">
                <!-- 关于部分 -->
                <div class="about-card">
                    <h3 class="section-title">
                        <i class="mdi mdi-information-outline"></i>关于
                    </h3>
                    <div class="section-content">
                        <p>本站专注于技术分享和学习交流的平台，基于Pear Admin Flask进行二次开发，旨在为广大开发者和技术爱好者提供一个便利的管理后台和学习环境。</p>
                    </div>
                </div>

                <!-- 技术框架部分 -->
                <div class="about-card">
                    <h3 class="section-title">
                        <i class="mdi mdi-code-tags"></i>技术框架
                    </h3>
                    <div class="section-content">
                        <h4><i class="mdi mdi-server"></i>后台框架</h4>
                        <p>我们的网站后台采用了强大的Python Flask框架，这使得我们的开发和维护更加高效。同时，它也为用户提供了灵活的扩展和定制功能。</p>
                        
                        <h4><i class="mdi mdi-web"></i>前端框架</h4>
                        <p>在前端部分，我们选择了流行的Layui框架，以确保良好的用户体验和界面的友好性。</p>
                        
                        <h4><i class="mdi mdi-database"></i>数据库支持</h4>
                        <p>本站支持多种主流数据库，包括MySQL、SQLite、PostgreSQL等。</p>
                    </div>
                </div>

                <!-- 个人站点部分 -->
                <div class="about-card">
                    <h3 class="section-title">
                        <i class="mdi mdi-account"></i>个人站点
                    </h3>
                    <div class="section-content">
                        <p>本站为个人站点，创建的初衷是为了促进技术的分享与交流。致力于提供一个开放、友好的环境，鼓励访问者相互学习和互动。</p>
                    </div>
                </div>

                <!-- 联系方式部分 -->
                <div class="about-card">
                    <h3 class="section-title">
                        <i class="mdi mdi-phone"></i>联系我们
                    </h3>
                    <div class="section-content">
                        <p>如果您有任何问题、建议或反馈，欢迎通过以下方式与我们联络：</p>
                        <div class="contact-info">
                            <div class="contact-item">
                                <i class="mdi mdi-email"></i>
                                <span>邮箱：kuai806666754@qq.com</span>
                            </div>
                            <div class="contact-item">
                                <i class="mdi mdi-qqchat"></i>
                                <span>QQ：806666754</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% include 'www/footer.html' %}
</html>